<!--
 * @Description:
 * @Author: cgt
 * @Date: 2021-11-16 10:30:14
 * @LastEditors: cgt
 * @LastEditTime: 2021-12-28 20:01:51
-->
<template>
  <div>
    <el-button type="primary" @click="loadData">加载数据</el-button>
    <el-button type="primary" @click="drawLineString">绘制线</el-button>
  </div>
</template>

<script>
import mixins from '../mixins';
export default {
  props: {
    getTool: {
      type: Function,
      required: true
    }
  },
  mixins: [mixins],
  data() {
    return {
      json: null
    };
  },
  methods: {
    async loadData() {
      var res = await fetch('./linestring.json');
      var json = await res.json();
      console.log('json', json);

      // var line = json.features[1];
      // var cline = turf.lineSegment(line).features[0];
      this.json = turf.featureCollection(json.features);
      console.log('this.json', this.json);

      // this.json = json;
      window.sgmap.impl.map.setCenter([104.195005806773, 30.676758659409145]);
      window.sgmap.impl.map.setZoom(9);
      this.addSourceLayer();
    },
    drawLineString() {
      if(!this.json) {
        alert('先加载数据');
        return;
      }
      var fs = this.json;
      // fs = Array(10).fill("").map(()=>fs).flat();
      this.getTool('EditTool').initTool();
      this.getTool('EditTool').setSnapFeatures(fs);
      this.getTool('EditTool').enableSnap();
      this.getTool('EditTool').changeMode('snap_line');
    },
    addSourceLayer() {
      window.sgmap.impl.map.addLayer({
        id: 'render-line',
        type: 'line',
        source: {
          type: 'geojson',
          data: this.json
        },
        layout: {
          'line-cap': 'round',
          'line-join': 'round'
        },
        paint: {
          'line-color': '#ed6498',
          'line-width': 2,
          'line-opacity': 0.8
        }
      });
    }
  }
};
</script>

<style>

</style>